<template>
  <div class="content">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <ul class="list">
        <li class="item">
          <div class="title-holder">
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <span>退单状态：</span>
                <!-- 0->待处理；1->退货中；2->已完成；3->已拒绝 -->
                <el-tag
                  v-if="orderInfo.status === 0"
                  type="danger"
                  effect="dark"
                >
                  待处理
                </el-tag>
                <el-tag
                  v-if="orderInfo.status === 1"
                  type="warning"
                  effect="dark"
                >
                  退货中
                </el-tag>
                <el-tag v-if="orderInfo.status === 2"> 已完成 </el-tag>
                <el-tag v-if="orderInfo.status === 3" effect="dark">
                  已拒绝
                </el-tag>
              </el-col>
            </el-row>
          </div>

          <div class="content-holder">
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                订单编号：<span>{{ orderInfo.orderSn }}</span>
                <span
                  style="color: #409eff; cursor: pointer"
                  @click="toOrderInfo"
                >订单详情</span>
              </el-col>
              <el-col :span="6" :offset="0">
                退单人姓名：<span>{{ orderInfo.returnName }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                退单理由：<span>{{ orderInfo.reason }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                退单描述：<span>{{ orderInfo.description }}</span>
              </el-col>
            </el-row>
            <el-row v-if="orderInfo.proofPics" :gutter="20">
              <el-col :span="6" :offset="0">
                退单图片：
                <el-image
                  style="width: 100px; height: 100px"
                  :src="orderInfo.proofPics"
                  :preview-src-list="[orderInfo.proofPics]"
                />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                申请时间：<span>{{ orderInfo.createTime }}</span>
              </el-col>
            </el-row>
          </div>
        </li>
        <li class="item">
          <div class="title-holder">
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <span>退货商品：</span>
              </el-col>
            </el-row>
          </div>
          <div class="content-holder">
            <!-- 商品展示表格 -->
            <el-table :data="[orderInfo]" border style="width: 100%">
              <el-table-column label="商品图片" width="150">
                <template slot-scope="scope">
                  <img class="image" :src="scope.row.productPic" alt="">
                </template>
              </el-table-column>
              <el-table-column label="商品描述" width="200">
                <template slot-scope="scope">
                  <p>名称：{{ scope.row.productName }}</p>
                  <p>品牌：{{ scope.row.productBrand }}</p>
                </template>
              </el-table-column>
              <el-table-column
                prop="productPrice"
                label="商品价格"
                width="200"
              />
              <el-table-column label="商品属性" width="200">
                <template v-if="isShow" slot-scope="scope">
                  <span
                    v-for="(item, index) in JSON.parse(scope.row.productAttr)"
                    :key="index"
                  >{{ item.key }}:{{ item.value }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="productCount"
                label="商品数量"
                width="200"
              />
              <el-table-column
                fixed="right"
                prop="returnAmount"
                label="总计"
                width="200"
              />
            </el-table>
          </div>
        </li>
        <li class="item">
          <div class="title-holder">
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <span>用户信息：</span>
              </el-col>
            </el-row>
          </div>
          <div class="content-holder">
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                联系人：<span>{{ orderInfo.returnName }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                联系方式：<span>{{ orderInfo.returnPhone }}</span>
              </el-col>
            </el-row>
          </div>
        </li>
        <li class="item">
          <div class="title-holder">
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <span>费用信息：</span>
              </el-col>
            </el-row>
          </div>
          <div class="content-holder">
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                退单金额：<span class="price">{{
                  orderInfo.returnAmount
                }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                运费金额：<span class="price">0</span>
              </el-col>
            </el-row>
            <!-- 待处理阶段 -->
            <template v-if="orderInfo.status === 0">
              <el-form
                ref="returnForm"
                size="small"
                :model="returnForm"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-row :gutter="20">
                  <el-col :span="6" :offset="0">
                    <el-form-item label="退款金额" prop="name">
                      <el-input-number
                        v-model="returnForm.returnAmount"
                        :min="0"
                        label="退款金额"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" :offset="0">
                    <el-form-item label="处理人" prop="handleMan">
                      <el-input v-model="returnForm.handleMan" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" :offset="0">
                    <el-form-item label="处理备注" prop="handleNote">
                      <el-input v-model="returnForm.handleNote" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12" :offset="0">
                    <el-form-item>
                      <el-button
                        type="primary"
                        @click="agree"
                      >同意退款</el-button>
                      <el-button @click="disAgree">拒绝退款</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </div>
        </li>

        <li v-if="orderInfo.status !== 0" class="item">
          <div class="title-holder">
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <span>处理结果：</span>
              </el-col>
            </el-row>
          </div>
          <div class="content-holder">
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                处理人：
                <span>{{ orderInfo.handleMan }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                处理备注:
                <span>{{ orderInfo.handleNote }}</span>
              </el-col>
              <el-col :span="6" :offset="0">
                处理时间：
                <span>{{ orderInfo.handleTime }}</span>
              </el-col>
            </el-row>
            <!-- 待处理阶段 -->
            <template v-if="orderInfo.status === 1">
              <el-form
                ref="receiveForm"
                size="small"
                :model="receiveForm"
                :rules="rules1"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-row :gutter="20">
                  <el-col :span="6" :offset="0">
                    <el-form-item label="收货人" prop="receiveMan">
                      <el-input v-model="receiveForm.receiveMan" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" :offset="0">
                    <el-form-item label="收货备注" prop="receiveNote">
                      <el-input v-model="receiveForm.receiveNote" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12" :offset="0">
                    <el-form-item>
                      <el-button
                        type="primary"
                        @click="receive"
                      >确定收货</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </div>
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script>
import {
  requestReturnInfo,
  sendDone,
  finishOrder,
  agreeReturn,
  disAgreeReturn,
  receiveReturn
} from '@/api/order'
export default {
  data() {
    return {
      isShow: false,
      id: this.$route.params.id,
      orderInfo: {},
      returnForm: {
        handleMan: '',
        handleNote: '',
        returnAmount: '',
        id: this.$route.params.id
      },
      receiveForm: {
        id: this.$route.params.id,
        receiveMan: '',
        receiveNote: ''
      },
      rules: {
        handleMan: [
          { required: true, message: '请输入处理人', trigger: 'blur' }
        ],
        handleNote: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      rules1: {
        receiveMan: [
          { required: true, message: '请输入收货人', trigger: 'blur' }
        ],
        receiveNote: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 确认收货
    receive() {
      this.$confirm('确认收货, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          receiveReturn(this.id, this.receiveForm).then((res) => {
            console.log(res)
            if (res.code === 20000) {
              this.$message({
                type: 'success',
                message: '收货成功!'
              })
              this.$router.go(-1)
            } else {
              this.$message({
                message: '收货失败',
                type: 'error'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 同意退单
    agree() {
      agreeReturn(this.id, this.returnForm).then((res) => {
        console.log(res)
        if (res.code === 20000) {
          this.$message({
            message: '退单成功',
            type: 'success'
          })
          this.$router.go(-1)
        } else {
          this.$message({
            message: '退单失败',
            type: 'error'
          })
        }
      })
    },
    // 拒绝退单
    disAgree() {
      disAgreeReturn(this.id, this.returnForm).then((res) => {
        console.log(res)
        if (res.code === 20000) {
          this.$message({
            message: '拒绝退单成功',
            type: 'success'
          })
          this.$router.go(-1)
        } else {
          this.$message({
            message: '拒绝退单失败',
            type: 'error'
          })
        }
      })
    },
    // 跳转到订单详情
    toOrderInfo() {
      this.$router.push({
        name: 'OrderDetail',
        params: { id: this.orderInfo.orderId }
      })
    },
    getData() {
      requestReturnInfo(this.id).then((res) => {
        console.log(res)
        this.orderInfo = res.data.orderReturnApply
        this.isShow = true
      })
    },
    // 关闭订单
    closeOrder() {
      finishOrder(this.id).then((res) => {
        console.log(res)
        if (res.code === 20000) {
          this.$message({
            message: '关闭订单成功',
            type: 'success'
          })
          this.$router.go(-1)
        } else {
          this.$message({
            message: '关闭订单失败',
            type: 'error'
          })
        }
      })
    },
    // 确认发货
    sendOrder() {
      const data = Object.assign({ orderId: this.id }, this.sendInfo)
      sendDone(data).then((res) => {
        console.log(res)
        if (res.code === 20000) {
          this.$message({
            message: '发货成功',
            type: 'success'
          })
          this.$router.go(-1)
        } else {
          this.$message({
            message: '发货失败',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  .step-holder {
    margin: 0 auto;
    width: 90%;
  }

  .list {
    .item:nth-child(1) {
      border-top: 0px;
    }

    .item {
      border-top: 1px solid #dcdfe6;
      padding: 20px 0;
      font-size: 14px;

      .price {
        color: #f00;
      }

      .el-col {
        margin-bottom: 20px;
      }
      .title-holder {
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: 700;

        span {
          font-weight: 600;
        }
      }
      .image {
        width: 100px;
        height: 100px;
      }
    }
  }

  .status-box {
    margin: 0 40px;
    font-size: 14px;
    .title-holder {
      padding: 20px 0;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 700;

      span {
        font-weight: 600;
      }
    }
  }

  .status-box.status2 {
    border-top: 1px solid #dcdfe6;
  }
}
</style>
